<template>
    <!-- 页面容器 -->
    <div class="header_information page-container">
      <!-- 头部 -->
      <el-row class="header_name">
        <!-- 标题 -->
        <el-col :span="24" class="header_text">
          <h1>参赛审核</h1>
        </el-col>
        <!-- 分隔线 -->
        <el-col :span="24">
          <div class="header_line"></div>
        </el-col>
      </el-row>
      <!-- 按钮区域 -->
      <el-row class="el_row_btn">
        <el-col :span="24" class="content">
          <div class="content_top_btn">
            <el-space wrap>
              <el-input
                class="input-default-width"
                size="large"
                clearable
                placeholder="请输入姓名"
                v-model="query_data.studentName"
              ></el-input>
              <el-input
                class="input-default-width"
                size="large"
                clearable
                placeholder="请输入手机号"
                v-model="query_data.phone"
              ></el-input>
              <!-- 组委会选择组件 -->
              <OrganizingSelect
                v-model="query_data.agentId"
                v-if="is_show_organizing"
              />
              <!-- 机构选择组件 -->
              <InstitutionSelect
                :disabled="!query_data.agentId"
                :agentId="query_data.agentId"
                v-model="query_data.institutionId"
              />
              <!-- 参赛选择组件 -->
              <EventSelect v-model="query_data.rootId" />
              <!-- 分组选择组件 -->
              <GroupsSelect v-model="query_data.groupId" />
              <!-- 状态选择组件 -->
              <EntrystatusSelect v-model="query_data.payStatus" />
              <!-- 搜索按钮 -->
              <el-button
                size="large"
                :icon="Search"
                circle
                :loading="loading"
                @click="handleSearch"
              />
              <!-- 导出组件 -->
              <ExportButton
                :handle="handleGetCustomList"
                filename="审核人员"
                :columns="export_competition_columns"
              />
            </el-space>
          </div>
        </el-col>
      </el-row>
      <!-- 表格内容区域 -->
      <el-row>
        <el-col :span="24">
          <el-table
            empty-text="暂无数据..."
            :data="data"
            border
            style="width: 100%"
            fixed
            v-loading="loading"
          >
            <el-table-column prop="studentId" label="学生ID" width="80" />
            <el-table-column
              prop="agentName"
              label="组委会名称"
              v-if="is_show_organizing"
              width="150"
            />
            <el-table-column
              prop="informationName"
              label="机构名称"
              width="150"
            />
            <el-table-column label="老师姓名" width="100" align="center">
              <template #default="scope">
                <span v-if="scope.row.teacherName">{{
                  scope.row.teacherName
                }}</span>
                <span v-else>---</span>
              </template>
            </el-table-column>
            <el-table-column label="比赛项目" prop="eventName" width="200">
              <template #default="scope">
                {{ scope.row.eventName }}({{ scope.row.playingTime }})
              </template>
            </el-table-column>
            <el-table-column prop="studentName" label="姓名" width="100" />
            <el-table-column
              prop="documentType"
              label="身份类型"
              width="100"
              align="center"
            >
              <template v-slot="{ row }">
                <el-tag class="ml-2" v-if="row.documentType == 'idcard'"
                  >身份证</el-tag
                >
                <el-tag
                  class="ml-2"
                  type="success"
                  v-if="row.documentType == 'passport'"
                  >护照</el-tag
                >
                <el-tag
                  class="ml-2"
                  type="success"
                  v-if="row.documentType == 'hcpassport'"
                  >港澳通行证</el-tag
                >
                <el-tag
                  class="ml-2"
                  type="success"
                  v-if="row.documentType == 'taiwanesesyndrome'"
                  >台胞证</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="documentNumber" label="类型号码" width="200">
              <template v-slot="{ row }">
                {{ row.documentNumber }}
              </template>
            </el-table-column>
  
            <el-table-column prop="phone" label="手机号" width="120" />
            <el-table-column prop="schoolName" label="学校" width="150" />
            <!-- <el-table-column prop="awards" label="奖项" width="150" /> -->
            <el-table-column prop="entryNumber" label="参赛证号" width="220">
              <template v-slot="{ row }">
                {{ row.entryNumber ?? "-" }}
              </template>
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="60">
              <template v-slot="{ row }">
                <el-tag type="error" v-if="row.gender == 0"> 女 </el-tag>
                <el-tag type="primary" v-else-if="row.gender == 1"> 男 </el-tag>
                <el-tag type="info" v-else> 保密 </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              prop="state"
              label="参赛状态"
              align="center"
              width="100"
            >
              <template v-slot="{ row }">
                <el-tag type="danger" v-if="row.entryStatus == 0">
                  未通过
                </el-tag>
                <el-tag type="info" v-if="row.entryStatus == 1"> 未报名 </el-tag>
                <el-tag type="warning" v-if="row.entryStatus == 2">
                  待审核
                </el-tag>
                <el-tag type="primary" v-if="row.entryStatus == 3">
                  待绑定
                </el-tag>
                <el-tag type="success" v-if="row.entryStatus == 4">
                  已绑定
                </el-tag>
              </template>
            </el-table-column>
  
            <el-table-column fixed="right" prop="zip" label="操作" width="100">
              <template v-slot="{ row }">
                <el-dropdown
                  trigger="click"
                  @command="
                    (value) => {
                      handleCommand(value, row);
                    }
                  "
                  v-if="
                    is_show_organizing ||
                    row.entryStatus == 2 ||
                    row.entryStatus == 3
                  "
                >
                  <span class="el-dropdown-link">
                    操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <!-- 激活在学员未绑定时出现 -->
                      <el-dropdown-item
                        command="update-entryStatus-to-4"
                        v-if="row.entryStatus == 3"
                        :disabled="!is_show_organizing"
                      >
                        激活绑定
                      </el-dropdown-item>
                      <!-- 撤销报名 -->
                      <!-- 1级可以随时撤销报名 2级在审核通过后无法撤销报名 -->
                      <el-dropdown-item
                        command="cancellation-of-registration"
                        v-if="is_show_organizing || row.entryStatus == 2"
                      >
                        撤销报名
                      </el-dropdown-item>
                      <!--这个只能1级用 -->
                      <!-- 通过审核 -->
                      <el-dropdown-item
                        v-if="row.entryStatus == 2 || is_show_organizing"
                        command="update-entryStatus-to-3"
                      >
                        通过审核
                      </el-dropdown-item>
                      <!-- 拒绝审核 -->
                      <el-dropdown-item
                        v-if="is_show_organizing"
                        command="update-entryStatus-to-1"
                      >
                        拒绝审核
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-text v-else>-</el-text>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="total"
          @current-change="handlePage"
        />
      </div>
    </div>
  </template>
  
  <script  setup>
  // 导入Vue.js和Element Plus的组件和方法
  import { Search } from "@element-plus/icons-vue"; // 导入搜索图标
  import { computed, onMounted } from "vue"; // 导入Vue的响应式方法
  import { ElMessage, ElMessageBox } from "element-plus"; // 导入Element Plus的消息提示和对话框组件
  import { usePage } from "@/hooks/usePage";
  
  // 导入自定义的组件
  import EntrystatusSelect from "@/components/entrystatus-select/index.vue";
  // 参赛状态选择组件
  import EventSelect from "@/components/event-select/index.vue";
  // 赛事选择组件
  import GroupsSelect from "@/components/groups-select/index.vue";
  // 分组选择组件
  import InstitutionSelect from "@/components/institution-select/index.vue";
  // 机构选择组件
  import OrganizingSelect from "@/components/organizing-select/index.vue";
  // 组委会选择组件
  import ExportButton from "@/components/export-button/index.vue";
  
  // 导入用户存储和API调用
  import { useUserStore } from "@/store/user";
  import {
    ActivatePlayerApi,
    getCompetitionListPage,
    withdrawalRegistration,
    auditCompetitionStudent,
  } from "@/api/manage/organcommitmenu/index.js"; // 导入赛事管理相关的API接口
  import { export_competition_columns } from "@/data/competition"; // 导入比赛导出列配置
  
  // 使用用户存储
  const userStore = useUserStore();
  // 使用Vue.js的响应式数据和方法
  const {
    total,
    data,
    loading,
    query_data,
    handleLoad,
    handlePage,
    handleGetCustomList,
  } = usePage({
    api_fn: getCompetitionListPage,
    q_data: {
      payStatus: "",
      agentId: "",
      institutionId: "",
      rootId: "",
      groupId: "",
      studentName: "",
      phone: "",
    },
  });
  
  /**
   * 操作命令处理函数
   */
  const handleCommand = (command, row) => {
    // 撤销报名
    if (command == "cancellation-of-registration") {
      handleRegistration(row.studentId, row.eventId);
    } else if (command == "update-entryStatus-to-4") {
      // 激活绑定
      ElMessageBox.confirm("是否确定激活绑定此选手？", "激活绑定", {
        type: "success",
      }).then(async () => {
        // rootId
        let res = await ActivatePlayerApi({
          studentId: row.studentId,
          rootId: row.rootId,
          eventId: row.eventId,
        });
        if (!res.success) {
          ElMessage.error(res.message);
        } else {
          handleLoad(true);
          ElMessage.success(res.message);
        }
      });
    } else if (command == "update-entryStatus-to-3") {
      // 激活绑定
      ElMessageBox.confirm("确定是否修改该选手参赛状态为通过？", "通过", {
        type: "success",
      }).then(async () => {
        // rootId
        let res = await auditCompetitionStudent({
          studentId: row.studentId,
          status: 3,
          eventId: row.eventId,
        });
        if (!res.success) {
          ElMessage.error(res.message);
        } else {
          handleLoad(true);
          ElMessage.success(res.message);
        }
      });
    } else if (command == "update-entryStatus-to-1") {
      // 激活绑定
      ElMessageBox.confirm("确定是否修改该选手参赛状态为拒绝通过？", "拒绝通过", {
        type: "error",
      }).then(async () => {
        let res = await auditCompetitionStudent({
          studentId: row.studentId,
          status: 0,
          eventId: row.eventId,
        });
        if (!res.success) {
          ElMessage.error(res.message);
        } else {
          handleLoad(true);
          ElMessage.success(res.message);
        }
      });
    }
  };
  
  /**
   * 撤销报名处理函数
   */
  const handleRegistration = (studentId, eventId) => {
    ElMessageBox.confirm("是否确定撤销报名", "撤销报名", {
      type: "error",
    }).then(async () => {
      let res = await withdrawalRegistration({ studentId, eventId });
      if (res.success) {
        ElMessage({
          title: "成功",
          message: res.message,
          type: "success",
        });
        handleLoad(true);
      } else {
        ElMessage.error(res.message);
      }
    });
  };
  
  /**
   * 搜索接口
   */
  const handleSearch = () => {
    handleLoad(true);
  };
  
  /**
   * 权限判断处理函数
   */
  const handleRoleInit = () => {
    if (userStore.info_data.role == "agent") {
      query_data.value.agentId = userStore.info_data.userId;
    } else if (userStore.info_data.role == "organizing") {
      query_data.value.agentId = "";
    }
  };
  
  // 计算属性，判断是否显示组委会选择
  const is_show_organizing = computed(() => {
    return userStore.info_data.role == "organizing";
  });
  
  // 页面挂载后执行的初始化函数
  onMounted(() => {
    handleRoleInit();
    handleLoad(true);
  });
  </script>
  
  <style lang="scss" scoped>
  .header_information {
    padding: 20px;
    .header_name {
      margin-left: 10px;
      margin-right: 10px;
      .header_text {
        margin-left: -10px;
        margin-right: -10px;
      }
      h1 {
        font-size: 28px;
      }
      // 线
      .header_line {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px 0 20px 0;
        background-color: #8473f717;
      }
    }
    //   内容
    .el_row_btn {
      margin-bottom: 20px;
      .content {
        .content_top_btn {
          display: flex;
  
          justify-content: flex-end;
          .top_search_inp {
            width: 300px;
            height: 40px;
            margin-right: 5px;
          }
          .top_search_btn {
            width: 110px;
            margin-right: 5px;
          }
        }
      }
    }
    .el-radio {
      margin: 0 0 0 5px;
    }
    :deep(.el-table__cell) {
      padding: 12px 0 !important;
    }
    // 分页
    .pagination {
      margin-top: 30px;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
    }
  }
  </style>